<template>
    <ElRow :gutter="20" justify="space-between">
        <ElCol :span="10">
            <SystemInfo />
        </ElCol>
        <ElCol :span="14">
            <SystemStatus :info="dataInfo" />
        </ElCol>
    </ElRow>
    <ElRow :gutter="20" justify="space-between" class="mt-[20px] mb-[20px]">
        <ElCol :span="10">
            <Overview />
        </ElCol>
        <ElCol :span="14">
            <LogPanel />
        </ElCol>
    </ElRow>
    <ElRow :gutter="20" justify="space-between">
        <ElCol :span="24">
            <Monitoring :info="dataInfo" />
        </ElCol>
    </ElRow>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { getResourceConditionAPI, getResourceRealtimeAPI } from '@/api/systemMonitor'


import SystemInfo from './components/SystemInfo.vue'
import SystemStatus from './components/SystemStatus.vue'
import Overview from './components/Overview.vue'
import LogPanel from './components/LogPanel.vue'
import Monitoring from './components/Monitoring.vue'
let dataInfo = ref(null)
let apiInterval;//接口请求定时器

const getAllApi = async () => {
    return await Promise.all([getResourceConditionAPI(), getResourceRealtimeAPI(),])
}

onMounted(() => {
    const setData = (result) => {
        dataInfo.value = {
            ...result[0].data,
            ...result[1].data,
            DiyTimestamp: new Date().getTime(),
        }
        // console.log("home...................")
    }
    getAllApi().then((result) => {
        setData(result)
    })
    apiInterval = setInterval(() => {
        getAllApi().then((result) => {
            getAllApi().then((result) => {
                setData(result)
            })
        })
    }, 1000 * 3.5)


})
onUnmounted(() => {
    apiInterval && clearInterval(apiInterval)
})
// const getAllApi = async () => {
//   return await Promise.all([getCPUInfosAPI(), getNETHostInfosAPI(), getUsageInfosAPI()])
// }

// getAllApi().then((result) => {
//   console.log(result, 'result')
// })
</script>
